<template>
    <el-popover :placement="placement" :width="width" :visible="visible && !props.disabled" popper-class="stage-subject-popover">
        <template #reference>
             <!-- 选择后的输入框显示 -->
            <div :class="['stage-subject','sss', ssClass, isDisabled]" @click="toggle" ref="inputStageWrapper">
                <div class="ss">
                     <!-- 折叠数据 -->
                    <template v-if="collapseTags && isHasData">
                        <span class="collapse-tag">
                            <span>{{collapseResult.curStageName}}{{collapseResult.subjectTotal ? '：' : ''}}</span>
                            <span v-if="collapseResult.collapseLabel" class="tag-blue">{{collapseResult.collapseLabel}}</span>
                            <span v-if="collapseResult.subjectTotal">{{collapseResult.subjectTotal ? collapseResult.curSubjectName : ''}}</span>
                        </span>
                        <el-tooltip
                            v-if="collapseResult.total || collapseResult.subjectTotal > 1"
                            class="box-item"
                            effect="light"
                            placement="top"
                            popper-class="stage-subject-popper"
                        >
                            <template #content> 
                                <div v-html="collapseResult.content"></div>
                            </template>
                            <span class="collapse-tag" v-if="collapseResult.total || collapseResult.subjectTotal > 1">更多</span>
                        </el-tooltip>
                    </template>
                    <template v-else-if="isHasData">
                        <div class="ss-stage" v-for="(item, stageIndex) in stateData.resultToSubmit" :key="item[optionsData.stageId]">
                            <div class="ss-stagename ss-bold">{{ item[optionsData.stageName]}}{{item.subjectList?.length ? '：' : ''}}</div>
                            <div class="ss-stageback">
                                <div class="ss-back" v-if="item.subjectList && item.subjectList.length">
                                    <div class="ss-subjects">
                                        <span class="ss-subject" v-for="(subject, subjectIndex) in item.subjectList" :key="subject[optionsData.subjectId]">
                                            {{ subject[optionsData.subjectName] }}
                                            <i v-if="!props.disabled" class="stage-icon-guanbi" @click.stop="delSubject(stageIndex, subjectIndex, item[optionsData.stageId], subject[optionsData.subjectId])"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="placeholder" v-else>{{ props.placeholder }}</div>
                </div>
                <i v-if="stateData.resultToSubmit.length && !props.disabled && clearable" class="stage-icon-clear is-clearable"  @click.stop="resetCommit"></i>
                <el-icon class="ss-slide-icon" :size="12"  :class="{'ss-slide-icon-up':visible,'is-clearable': clearable && stateData.resultToSubmit.length}">
                    <CaretBottom/>
                </el-icon>
            </div>
        </template>
        <div ref="selectStageWrapper" class="stage-subject-container">
            <div class="sss-list-inner">
                <!-- 左边部分所有学段数据 -->
                <div class="stages" :style="{height: props.height ? `${props.height}px` : 'auto'}">
                    <div :class="['stage','stage-first-ct', fmtStageClass(item.stage), `stage-${item.stage}`]" v-for="item in stateData.stages" :key="item.stage" @click="checkStage(item)">
                        <el-checkbox class="stage-checkbox" :disabled="isCheckedAllStage && item.stage != 9999" v-model="stateData.stageNameMap[item.stage].checked" @change="changeChecked($event, item, 'stage')"></el-checkbox>
                        <div class="stage-name" :class="isCheckedAllStage && item.stage != 9999 ? 'stage-name-disabled' : ''">
                            {{item.stageName}}
                        </div>
                        <div class="selected-num" v-if="stateData.stageNumMap[item.stage] && fmtNum(item.stage)">{{ fmtNum(item.stage) }}</div>
                    </div>
                </div>
                <!-- 右边部分学段对应的学科、年级数据 -->
                <div class="subjects" :style="{height: props.height ? `${props.height}px` : 'auto'}">
                    <div class="subjects-inner">
                        <div 
                            class="subject" 
                            v-for="subject in stateData.stageSubjectMap[curStage]" 
                            :key="`${curStage}-${subject.code}`"
                            :class="subject.code == 9999 ? 'subject-9999' : ''"
                        >
                            <el-checkbox :disabled="isCheckedAllSubject && subject.code != 9999" v-model="subject.checked" @change="changeChecked($event, subject, 'subject')">{{ subject.name }}</el-checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns">
                <div class="btn btn-reset" @click="toggle">取消</div>
                <div class="btn btn-confirm" @click="confirm">确定</div>
            </div>
        </div>
    </el-popover>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick, computed, unref, onBeforeUnmount, watch } from 'vue';
import { useStore } from 'vuex';
import { deepCopy } from '@/lib/tools';
import Message from '@/components/message/message.js';
import { useFormItem } from 'element-plus';
import { CaretBottom } from '@element-plus/icons-vue';

const store = useStore();

const {formItem} = useFormItem()

// update:selectedData 格式与props的selectedData格式一致
const emit = defineEmits(['update:selectedData']);

const visible = ref(false);

const isInit = ref(true); // 是否是初始化进来

// 输入框
const inputStageWrapper = ref(null);

// 下拉内容
const selectStageWrapper = ref(null);

const props = defineProps({
    collapseTags:{ // 折叠所有数据
        type: Boolean,
        default: false
    }, 
    collapseTagType:{
        type: String,
        default: 'subject' //'all' 'subject' 'stage'
    }, 
    placeholder: {
        type: String,
        default: '请选择学段学科年级'
    },
    clearable:{
        type:Boolean,
        default:false
    },
    selectedData: {
        // 回显数据
        type: Array,
        default: () => {
            return [];
            // return [{
            //     stageId: 1202,
            //     stageName: '小学',
            //     subjectList: [
            //         {
            //             'subjectId': 1197,
            //             'subjectName': '劳动'
            //         }
            //     ],
            //     gradeList: [
            //          {
            //             'gradeId': 1301,
            //             'gradeName': '一年级'
            //         }
            //     ]
            // }]
        }
    },
    options: {
        // 自定义回显对象属性
        type: Object,
        default: () => {
            return {
                stageId: 'stageId',
                stageName: 'stageName',
                subjectId: 'subjectId',
                subjectName: 'subjectName',
                gradeId: 'gradeId',
                gradeName: 'gradeName'
            };
        }
    },
    list: {
        // 学段学科初始化数据
        type: Array,
        default: () => {
            return [];
        }
    },
    placement: {
        // 出现的位置
        type: String,
        default: 'bottom'
    },
    // 级联框高度
    height: {
        type: [String, Number],
        default: ''
    },
    width: {
        type: [String, Number],
        default: '680px' 
    },
    disabled: {
        type: Boolean,
        default: false
    }
});

// 自定义属性
const optionsData = computed(() => {
    return Object.assign(
        {},
        {
            stageId: 'stageId',
            stageName: 'stageName',
            subjectId: 'subjectId',
            subjectName: 'subjectName',
            gradeId: 'gradeId',
            gradeName: 'gradeName'
        },
        props.options
    );
});

const data = ref({}); // 下拉需要渲染数据

const curStage = ref(''); // 下拉激活的学段

const popoverWidth = ref(600); // 默认的宽度

const stateData = reactive({
    basicData: [], // 接口返回的初始数据
    stages: [], // 所有学段数据-排序
    stageNameMap: {}, // 所有学段对象数据
    resultToSubmit: [], // 文本框需要提交的数据
    commitResult: [], // 组装好的需要提交的数据
    initSelectData: [], // 初始化的选中数据
    stageSubjectMap: {}, // 学段学科数据
    stageNumMap: {} // 学段对应的选中的学科年级数据  subjectNum + gradeNum
});

// 样式
const ssClass = computed(() => {
    return !isHasData.value && 'sss-no-padding' || ''
})

const isDisabled = computed(() => {
    return props.disabled ? 'is-disabled' : ''
})

// 判断是否有数据
const isHasData = computed(() => {
    return stateData.resultToSubmit && stateData.resultToSubmit.length;
});

function fmtStageClass(stageId) {
    return (stageId == curStage.value && 'cur-stage') || '';
}

// 选择的总数
function fmtNum(stage) {
    let stageItem = stateData.stageNumMap[stage];
    let subjectList = stateData.stageSubjectMap[stage];
    let checkedSubjectList = subjectList.filter(item => item.checked);
    if(checkedSubjectList.length && checkedSubjectList[0].code == 9999) {
        return '全';
    }
    return stageItem.subjectNum || 0;
}

// 是否选择全学段
const isCheckedAllStage = computed(() => {
    return stateData.stageNameMap[9999]?.checked;
});

// 是否选择全学科
const isCheckedAllSubject = computed(() => {
    return (stateData.stageSubjectMap[curStage.value] || []).find(item => {
        return item.code === 9999 && item.checked;
    });
});

// 折叠时显示的结果
const collapseResult = computed(() => {
    if(stateData.resultToSubmit.length){
       
        // 第一个显示的选中的学段数据
        const firstData = stateData.resultToSubmit[0];
        if(props.collapseTagType === 'subject'){ // 折叠学科
            let subjectList = firstData.subjectList || [];
            let firstSubjectData = subjectList.length && subjectList[0] || {};
            let content = handleStageSubject(stateData.resultToSubmit);
            return {
                curStage: firstData.stageId,
                curStageName: firstData.stageName,
                curSubjectId: firstSubjectData.subjectId,
                curSubjectName: firstSubjectData.subjectId == 9999 ? '学科' : (firstSubjectData.subjectName || ''),
                subjectTotal: subjectList.length,
                total: stateData.resultToSubmit.length - 1,
                collapseLabel: firstSubjectData.subjectId == 9999 ? '全' : '',
                content: content,

            }
        }
    }
    return {};
})

watch(
    () => props.selectedData,
    (n = []) => {
        stateData.initSelectData = n;
        // 组装输入框中已经选中的所有数据
        stateData.resultToSubmit = n;
        // 组装提交给后台的数据
        stateData.commitResult = n;

    },
    {
        deep: true
    }
);

onMounted(async () => {
    // 请求学段学科
    if (props.list && props.list.length) {
        refreshData(props.list);
    } else {
        getData();
    }

    isInit.value = true;
    stateData.initSelectData =
        (props.selectedData.length &&
            JSON.parse(JSON.stringify(props.selectedData))) ||
        [];

    await nextTick();
    // 初始化弹框宽度
    let sssList = document.querySelector('.stage-subject');
    popoverWidth.value = sssList.offsetWidth;

    window.addEventListener('mousedown', mousedownChange, true); // 监听鼠标点击事件
});

const mousedownChange = (e) => {
    if (
        unref(inputStageWrapper).contains(e.target) ||
        unref(selectStageWrapper).contains(e.target)
    ) {
        return;
    }
    closePopover();
};

onBeforeUnmount(() => {
    window.removeEventListener('mousedown', mousedownChange, true);
});

function getData() {
    // 获取学段学科年级列表
    return store
        .dispatch('common/getAllStageRefSubject', {withAllStage: true, withAllSubject: true, withAllGrade: true})
        .then((res) => {
            refreshData(res);
        })
        .catch((err) => {
            console.log(err);
        })
        .finally(() => {});
}

function refreshData(res) {
    res = (res || []).map(item => {
        if(item.stage == 9999) {
            item.stageName = '全学段';
        }
        item.subjects = (item.subjects || []).map(subject => {
            if(subject.code == 9999) {
                subject.name = '全学科';
            }
            return subject;
        });
        return item;
    })
    stateData.basicData = res || [];
    curStage.value =
        (stateData.basicData.length &&
            stateData.basicData[0] &&
            stateData.basicData[0].stage) ||
        '';
    fmtInitData();
    fmtCheckedData();
}

// 组装所有学段与学科对象数据  stageId:[学科]
function fmtInitData() {
    let list = (stateData.basicData.length && stateData.basicData) || [];
    // 学段数据
    let stageList = [];

    list.length &&
        list.forEach((item) => {
            let temp = { stage: item.stage, stageName: item.stageName };
            stageList.push(temp);
            stateData.stageNameMap[item.stage] = temp;
            stateData.stageSubjectMap[item.stage] = item.subjects || [];
        });
    stateData.stages = stageList;
}

// 点击确定
async function confirmData() {
    let stageList = [];
    const {stageNameMap, stageNumMap, stageSubjectMap } = stateData;
    for(let key in stageNameMap) {
        if(stageNameMap[key].checked) {
            stageList.push(key);
        }
    }

    let result = [];
    const {stageId, stageName, subjectId, subjectName} = optionsData.value;
    stageList.forEach((tempStageId, index) => {
        let stageTemp = stageNameMap[tempStageId] || {};
        // 组装选择的学段数据
        let stageObj = { subjectList: []};
        stageObj[stageId] = Number(tempStageId);
        stageObj[stageName] = stageTemp.stageName;
        result.push(stageObj);
        if (stageNumMap[tempStageId] && stageNumMap[tempStageId].subjectNum) {
            // 格式化提交和输入框展示的学段数据
            let subjectList = stageSubjectMap[tempStageId] || [];
            subjectList.forEach((subject) => {
                if (subject.checked) {
                    // 格式化提交和输入框展示的学科数据
                    let subjectObj = {};
                    subjectObj[subjectId] = subject.code;
                    subjectObj[subjectName] = subject.name;
                    result[index].subjectList.push(subjectObj);
                }
            });
        }
    });
    stateData.resultToSubmit = result;
    stateData.commitResult = result;

    console.log('commitResult==', result);

    if (!isInit.value) {
        emit('update:selectedData', stateData.commitResult);
        toggle();
        // 触发el-form-item的验证
        formItem.validate();
    }
}

// 切换学段
function checkStage(item) {
    if(!isCheckedAllStage.value) {
        curStage.value = item.stage;
    }
}

// 初始化组装已经选中的数据
function fmtCheckedData() {
    let checkedList = stateData.initSelectData || [];
    // 已经选择的学段学科、学段年级数据
    let checkedSubjectMap = {};

    // 后台给的回显数据
    const {stageId, subjectId} = optionsData.value;

    reset();
    checkedList.forEach((item) => {
        let subjectList = item.subjectList || [];
        let tempStageId = item[stageId];
        stateData.stageNumMap[tempStageId] = {
            subjectNum: 0
        };
        
        subjectList.forEach((subItem) => {
            let mainId = `${tempStageId}-${subItem[subjectId]}`;
            checkedSubjectMap[mainId] = subItem;
        });
    });
    
    // 将复选框勾选
    checkedList.length &&
        checkedList.forEach((item) => {
            let tempStageId = item[stageId];
            if(stateData.stageNameMap[tempStageId]) {
                stateData.stageNameMap[tempStageId].checked = true;
            }
            // 公共的初始化学科学段数据
            let subjectList =
                stateData.stageSubjectMap[tempStageId] || [];
            subjectList.forEach((subjectItem) => {
                let mainId = `${tempStageId}-${subjectItem.code}`;
                if (checkedSubjectMap[mainId]) {
                    subjectItem.checked = true;
                    ++stateData.stageNumMap[tempStageId].subjectNum;
                } else {
                    subjectItem.checked = false;
                }
            });
        });

    // 组装输入框中已经选中的所有数据
    stateData.resultToSubmit = checkedList;
    // 组装提交给后台的数据
    stateData.commitResult = checkedList;
}

// 点击打开对话框
function toggle() {
    isInit.value = false;
    nextTick(() => {
        let sssList = document.querySelector('.stage-subject');
        popoverWidth.value = sssList.offsetWidth;
        visible.value = !visible.value;
        if (visible.value) {
            fmtCheckedData();
            curStage.value =
                (stateData.basicData.length &&
                    stateData.basicData[0] &&
                    stateData.basicData[0].stage) ||
                '';
        }
    });
}

function close() {
    isInit.value = false;
    visible.value = false;
}

// 删除学科单个元素数据
function delSubject(stageIndex, subjectIndex, stageId, subjectId) {
    stateData.resultToSubmit[stageIndex].subjectList.splice(subjectIndex, 1);
    let subjectList = stateData.stageSubjectMap[stageId] || [];

    subjectList.length &&
        subjectList.forEach((subjectItem) => {
            if (subjectItem.code === subjectId) {
                subjectItem.checked = false;
                --stateData.stageNumMap[stageId].subjectNum;
            }
        });

    stateData.stageSubjectMap[stageId] = (stateData.stageSubjectMap[stageId] || []).map(item => {
        if(item.code !== subjectId) {
            return item;
        } else {
            return {
                ...item,
                checked: false,
            }
        }
    });

    stateData.commitResult = deepCopy(stateData.resultToSubmit);
    console.log('commitResult==', stateData.commitResult);
    emit('update:selectedData', stateData.commitResult);
    formItem.validate();
}

// 选择学段、学科、年级数据
function changeChecked(e, data, type) {
    switch(type) {
        case 'stage':
            if(data.stage == 9999 && e) {
                reset();
                checkStage({stage: 9999});
            }  
            if(!e) {
                stateData.stageSubjectMap[data.stage].forEach(
                    (item) => (item.checked = false)
                );
                if(stateData.stageNumMap[data.stage]) {
                    stateData.stageNumMap[data.stage].subjectNum = 0;
                }
            }
            data.checked = e;
            break;
        case 'subject':
            if(curStage.value == 9999 && e && !stateData.stageNameMap[curStage.value].checked) {
                reset();
            }
            if(data.code == 9999) {
                if(e) {
                    stateData.stageSubjectMap[curStage.value].forEach(
                        (item) => {
                            if(item.code != 9999) {
                                item.checked = false;
                            }
                        }
                    );
                    stateData.stageNameMap[curStage.value].checked = true;
                }
                
                if(!stateData.stageNumMap[curStage.value]) {
                    stateData.stageNumMap[curStage.value] = {
                        subjectNum: e ? 1 : 0
                    }
                }           
                stateData.stageNumMap[curStage.value].subjectNum = e ? 1 : 0;
                
            } else {
                handleNum(e, data, type);
            }
            data.checked = e;
            break;
        default:
            break;
    }
}

function handleNum(e, data, type) {
    type = type + 'Num';
    data.checked = e;
    if(e) {
        stateData.stageNameMap[curStage.value].checked = true;
    }
    if (
        stateData.stageNumMap[curStage.value] &&
        stateData.stageNumMap[curStage.value][type]
    ) {
        e
            ? ++stateData.stageNumMap[curStage.value][type]
            : --stateData.stageNumMap[curStage.value][type];
    } else {
        let obj = {};
        obj[type] = e ? 1 : 0;
        stateData.stageNumMap[curStage.value] = {
            ...{},
            ...stateData.stageNumMap[curStage.value],
            ...obj
        };
    }
}

function reset() {
    resetStage();
    resetSubject();
    if (Object.keys(stateData.stageNumMap).length) {
        for (const key in stateData.stageNumMap) {
            stateData.stageNumMap[key] = 0;
        }
    }
    stateData.resultToSubmit = [];
    // 组装提交给后台的数据
    stateData.commitResult = [];
}

// 清空
function resetCommit() {
    reset();
    visible.value = false;
    emit('update:selectedData', stateData.commitResult);
    formItem.validate()
}

// 重置学段
function resetStage() {
    if (Object.keys(stateData.stageNameMap).length) {
        for (const key in stateData.stageNameMap) {
            stateData.stageNameMap[key].checked = false;
        }
    }
}

// 重置学科
function resetSubject() {
    if (Object.keys(stateData.stageSubjectMap).length) {
        for (const key in stateData.stageSubjectMap) {
            stateData.stageSubjectMap[key].forEach(
                (item) => (item.checked = false)
            );
        }
    }
}

function confirm() {
    confirmData();
}

// 关闭对话框
function closePopover() {
    visible.value = false;
}

// 处理学段学科数据
function handleStageSubject(dataList, nodata = '') {
    let stageList = dataList || [];
    let str = '';
    stageList.forEach((stageItem, index) => {
        let subjects = stageItem.subjectList
            .map((item) => {
                return item.subjectName;
            })
            .join('，');
        if(subjects) {
            str += `${stageItem.stageName}：${subjects}` + '；<div style="margin-top: 4px;"/>';
        }else {
            str += `${stageItem.stageName}` + '；<div style="margin-top: 4px;"/>';
        }
    });
    str = str.substring(0, str.length - 1);
    return str || nodata;
}

</script>

<style lang="scss">
.subject {
    .el-checkbox__label {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
    }
}

.stage-subject-popover {
     padding: 0px !important;
}

.stage-subject-popper {
    width: 400px;
    box-shadow: 0px 12px 48px 16px #00000008, 0px 9px 28px 0px #0000000d, 0px 6px 16px -8px #00000014;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light) !important;
    font-size: 12px;
    color: #222222;
    line-height: 1.5;
    padding: 12px;
}
</style>

<style lang="scss" scoped>
$primaryColor: var(--color-primary);
$primaryOpacityColor1: #ffffff;
$borderHoverColor: var(--el-border-color-hover);
$placeholderColor: var(--el-text-color-placeholder);

.sss {
    min-height: 30px;
    height: auto;
    width: 100%;
    border: 1px solid #dddee1;
    padding: 0px 0px 0px 4px;
    position: relative;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;

    &.is-disabled{
        cursor:not-allowed;
        background-color: var(--srt-select-disabled-bg-color);
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--srt-select-border-color);
    }
    &:hover:not(.is-disabled) {
        border-color: $borderHoverColor;
    }
    &.sss-no-padding {
        padding: 0px 0px 0px 12px;
    }
    .placeholder {
        color: $placeholderColor;
        cursor: pointer;
        user-select: none;
    }
    .icon-clear {
        color: #b9bece;
        font-size: 14px;
        display: inline-block;
        transition: all 0.2s;
        margin: 0px 8px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    &:hover {
        .icon-clear {
            opacity: 1;
        }
    }
    .ss {
        width: calc(100% - 30px);
        color: #000000;
        line-height: 30px;
        display: inline-block;

        .ss-stage {
            display: flex;
            align-items: baseline;
            margin-bottom: 4px;
            &:last-child {
                margin-bottom: 0;
            }
        }

        .ss-stageback {
            .ss-back {
                display: flex;
                align-items: baseline;
            }
        }
        .ss-stagename {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 400;
            color: #535a73;
            flex-wrap: nowrap;
            white-space: nowrap;
            &.ss-bold {
                font-weight: bold;
            }
        }
        .ss-subjects {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            min-width: 100px;
        }
        .ss-subject {
            background: #eceff4;
            border-radius: 4px;
            padding: 1px 6px;
            margin: 0 8px 6px 0;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #535a73;
            line-height: 20px;
        }
    }
}

.stage-subject-container {
    :deep(.el-checkbox__inner) {
        width: 16px;
        height: 16px;
        &::after {
            left: 5px;
            top: 2px;
        }
    }
    .btns {
        box-shadow: 0px -2px 10px 0px #00000014;
        padding: 12px 20px 12px 0px;
        text-align: right;
    }
    .btn {
        border-radius: 4px;
        display: inline-block;
        cursor: pointer;
        user-select: none;
        padding: 7px 18px 6px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
    }
    .btn-reset {
        border: 1px solid #cccccc;
        color: #666666;
        margin-right: 20px;
    }
    .btn-confirm {
        border: 1px solid $primaryColor;
        color: #ffffff;
        background: $primaryColor;
    }
    .sss-list-inner {
        display: flex;
        align-items: stretch;
        max-height: 354px;
    }
    .stages {
        flex: 0 0 173px;
        overflow-y: auto;
        background: #EFF0F2;
        border-radius: 4px 0px 0px 0px;
    }

    .stage {
        display: flex;
        width: 100%;
        line-height: 28px;
        color: #000000;
        cursor: pointer;
        user-select: none;
        padding: 0 20px 0px 13px;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        position: relative;

        &.stage-9999 {
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: #333333;
        }

        &:first-child {
            margin-top: 9px;
        }
        &.cur-stage {
            &::after {
                content: '';
                position: relative;
                background: $primaryOpacityColor1;
                position: absolute;
                top: -6px;
                left: 0px;
                right: 0px;
                bottom: -6px;
            }
        }
    }
    .subjects {
        padding: 9px 4px 0 16px;
        overflow-y: auto;
    }
    .subjects-inner {
        padding-bottom: 11px;
    }
    .subject {
        display: inline-block;
        margin-right: 24px;
        width: 140px;
        &:nth-child(3n+1) {
            margin-right: 0px;
        }
        :deep(.el-checkbox) {
            width: 100%;
        }
        :deep(.el-checkbox__label) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.mtop {
            margin-top: 20px;
        }
        &.subject-9999, &.grade-9999 {
            display: block;
            :deep(.el-checkbox__label) {
                font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                font-weight: bold;
                color: #333333;
            }
            &.grade-9999 {
                padding-top: 11px;
                border-top: 1px solid #E0E2E4
            }
        }
    }
    .stage-first-ct {
        position: relative;
    }
    .stage-name {
        display: inline-block;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;
        z-index: 10;
        &.stage-name-disabled {
            color: #a8abb2;
            cursor: not-allowed;
        }
    }
    .stage-checkbox {
        height: 28px !important;
        margin-right: 5px;
    }
    .selected-num {
        position: absolute;
        right: 13px;
        top: 50%;
        font-size: 12px;
        color: #ffffff;
        background: $primaryColor;
        display: inline-block;
        line-height: 18px;
        text-align: center;
        border-radius: 2px;
        width: 18px;
        height: 18px;
        z-index: 10;
        transform: translateY(-50%);
    }
}

.stage-icon-guanbi {
    background: url(./assets/close.png) no-repeat;
    width: 10px;
    height: 10px;
    background-size: contain;
    display: inline-block;
    cursor: pointer;
}
.stage-icon-clear {
    background: url(./assets/clear.png) no-repeat;
    width: 16px;
    height: 16px;
    background-size: contain;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 11px;
}
.collapse-tag {
    background: #EFF0F2;
    border-radius: 2px;
    display: inline-block;
    padding: 4px 8px 3px;
    line-height: 1.5; 
    margin-right: 4px;
    .tag-blue {
        background: var(--main-active-text-color);
        border-radius: 2px;
        display: inline-block;
        height: 16px;
        width: 16px;
        color: #ffffff;
        line-height: 16px;
        margin-right: 3px;
        font-size: 12px;
        text-align: center;
    }
}
.sss:not(.is-disabled){
    &:hover{
        .ss-slide-icon.is-clearable{
            display: none;
        }
        .stage-icon-clear.is-clearable{
            display: block;
        }
    }
    .ss-slide-icon{
        transform: rotateZ(0);
        transition-duration: 0.3s;
        &-up{
            transform: rotateZ(-180deg)
        }
    }
    .stage-icon-clear.is-clearable{
        display: none;
    }
}
</style>